Favicon en la sidebar

k_nelita me ha pedido que explique la forma de añadir un sistema de publicidad creado con esas pequeñas imágenes de 16x16 que conocemos por favicon.

Los favicones están incluidos en una tabla.

<div class="side-favicon ">

<div class="favicon">

<table fcellpadding="0" align="center">

<tbody>

<tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<tr>

</tr>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

<td>

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

<td>

</td></tr>

</tbody>

</table>

</div></div>

La vamos a incluir en un gadget de HTML y las filas de la tabla dependerán de la cantidad de líneas de favicones que deseamos añadir.

En la tabla del ejemplo añadí dos líneas para tres favicones en cada línea, pero podemos aumentar la cantidad de favicones dependiendo del ancho de la sidebar.
El código para cada favicón lo añadimos entre <td> y <td>

Cuando los favicones cubren una línea pasaremos a la línea siguiente, las etiquetas <tr> y </tr> serán las encargadas de producir el salto de línea..

El favicon es un enlace que nos llevará a la url que le indiquemos.

<a href="ur-pagina" title="título">

<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Le añadimos target="_blank" para que abra en ventana nueva, también le podemos añadir la etiqueta rel="nofollow" para que Google no tenga en cuenta esos enlaces, eso ya dependerá de cada uno.

<a href="ur-pagina" target="_blank" rel="nofollow" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Guardamos los cambios y añadimos los estilos, nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos:

.favicon {

padding:2px;

text-align:center;

}

.favicon a img {

background-color: #fff;

border:1px solid #ccc;

padding:2px 2px;width:16px

}

div.side-favicon {

background:#FFFF;

border:1px dashed #C0C0C0;

margin:0 0 20px;

padding:4px 4px;

}

Con "background" podemos cambiar el color de fondo, el tipo de borde y color en "border"